import React, { useRef, useEffect, useState } from 'react';
import style from "./Carousel.module.css";
import { Carousel, Progress, Button } from 'antd';
// 滚动条的轮播图
function Carouselimg() {
    const dots = ['金融', '生鲜', '家居', '科技', '媒体', '家电', '电商', '文化', '地产'];
    const carouselRef = useRef(null);

    const [currentIndex, setCurrentIndex] = useState(0);

    const [percent, setPercent] = useState(0);
    //定时器
    const [progressTimer, setProgressTimer] = useState<number | null>(null);

    // 点击dots事件  
    const handleDotClick = (index: number) => {
        if (carouselRef.current) {
            carouselRef.current.goTo(index);
        }
        setCurrentIndex(index);
        resetProgress();  //重置原来的
        updateProgress(); // 开启下一个
    };

    // 重置进度条  
    const resetProgress = () => {
        if (progressTimer) {
            clearInterval(progressTimer);
        }
        setPercent(0);
        setProgressTimer(null);
    };

    // 轮播图切换事件  
    // const handleAfterChange = (currentSlide: number) => {
    //     setCurrentIndex(currentSlide);
    //     resetProgress();
    // };

    // 更新进度条  
    const updateProgress = () => {
        resetProgress();
        const increment = 100 / (3000 / 100); // 10 / 3000毫秒的总周期分成100次更新 得到百分比  
        const interval = setInterval(() => {  //特定的时间间隔内重复执行某个操作
            setPercent(prev => {
                const newPercent = Math.min(prev + increment, 100); // 不超过100
                if (newPercent >= 100) {
                    clearInterval(interval);
                    // 等待一段时间后跳转
                    setTimeout(() => {
                        if (carouselRef.current) {
                            const nextIndex = (currentIndex + 1) % dots.length; // 取模 最后一个返回第一个
                            carouselRef.current.goTo(nextIndex);
                            setCurrentIndex(nextIndex);
                        }
                        // 重置进度条  
                        setPercent(0);
                    }, 300); // 停顿毫秒
                    return 100; // 保持100，确保进度条显示满
                }
                return newPercent;
            });
        }, 100); // 每100毫秒更新一次进度  
        setProgressTimer(interval);
    };


    useEffect(() => {
        // 组件挂载时启动进度条  
        updateProgress();

        // 组件卸载时清理定时器  
        return () => {
            if (progressTimer) {
                clearInterval(progressTimer);
            }
        };
    }, [currentIndex]); // 依赖currentIndex，确保在currentIndex变化时重置进度条 


    return (
        <div className={style.easing}>
            <div className={style.lun}>
                <Carousel
                    ref={carouselRef}
                    effect="fade"
                    dotPosition='bottom'
                    dots={false}
                // autoplay
                // speed={3000}
                // afterChange={handleAfterChange}
                >
                    <div className={style.lun1}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/79f150d9b61a81ce62d87b9b6ba7f1cc.png" alt="" />
                            <h3>银河证券如何能2700+员工，用视觉内容驱动高效展业?</h3>
                            <div className={style.hezuo}>
                                "合作至今，稿定在银河证券的总部部门和全国分支机构都得到广泛应用，使用人员也从最<br />
                                初的1000+增至2700+。
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                    <div className={style.lun2}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/f340dffd71096c5800aaefb24acb235c.png" alt="" />
                            <h3>通过内容数智化实践，生鲜零售超高频营销需求迎刃而解</h3>
                            <div className={style.hezuo}>
                                "合作至今，稿定在银河证券的总部部门和全国分支机构都得到广泛应用，使用人员也从最<br />
                                初的1000+增至2700+。
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                    <div className={style.lun3}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/1c27b99d97aa454eca9dd65ff935d4ca.png" alt="" />
                            <h3>顾家家居如何玩转潮流营销，释放品牌魅力!</h3>
                            <div className={style.hezuo}>
                                "合作至今，稿定在银河证券的总部部门和全国分支机构都得到广泛应用，使用人员也从最<br />
                                初的1000+增至2700+。
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                    <div className={style.lun4}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/3302ad1c39c796309182c39790bee478.png" alt="" />
                            <h3>释放全员内容生产力!</h3>
                            <div className={style.hezuo}>
                                商汤借助稿定解决了日常大量运营类内容生产需求，同时赋予全体业务员和其非设计人员
                                <br />
                                高效内容生产能力
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                    <div className={style.lun5}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/79f150d9b61a81ce62d87b9b6ba7f1cc.png" alt="" />
                            <h3>银河证券如何能2700+员工，用视觉内容驱动高效展业?</h3>
                            <div className={style.hezuo}>
                                "合作至今，稿定在银河证券的总部部门和全国分支机构都得到广泛应用，使用人员也从最<br />
                                初的1000+增至2700+。
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                    <div className={style.lun1}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/f340dffd71096c5800aaefb24acb235c.png" alt="" />
                            <h3>通过内容数智化实践，生鲜零售超高频营销需求迎刃而解</h3>
                            <div className={style.hezuo}>
                                "合作至今，稿定在银河证券的总部部门和全国分支机构都得到广泛应用，使用人员也从最<br />
                                初的1000+增至2700+。
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                    <div className={style.lun2}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/79f150d9b61a81ce62d87b9b6ba7f1cc.png" alt="" />
                            <h3>银河证券如何能2700+员工，用视觉内容驱动高效展业?</h3>
                            <div className={style.hezuo}>
                                "合作至今，稿定在银河证券的总部部门和全国分支机构都得到广泛应用，使用人员也从最<br />
                                初的1000+增至2700+。
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                    <div className={style.lun3}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/1c27b99d97aa454eca9dd65ff935d4ca.png" alt="" />
                            <h3>顾家家居如何玩转潮流营销，释放品牌魅力!</h3>
                            <div className={style.hezuo}>
                                "合作至今，稿定在银河证券的总部部门和全国分支机构都得到广泛应用，使用人员也从最<br />
                                初的1000+增至2700+。
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                    <div className={style.lun4}>
                        <div className={style.lunone}>
                            <img src="https://cdn.dancf.com/fe-assets/20231124/%E6%A1%88%E4%BE%8B%E5%8D%A1%E7%89%87logo%E5%8F%8D%E7%99%BD/79f150d9b61a81ce62d87b9b6ba7f1cc.png" alt="" />
                            <h3>银河证券如何能2700+员工，用视觉内容驱动高效展业?</h3>
                            <div className={style.hezuo}>
                                "合作至今，稿定在银河证券的总部部门和全国分支机构都得到广泛应用，使用人员也从最<br />
                                初的1000+增至2700+。
                            </div>
                            <div className={style.lunbtns}>
                                <Button style={{ background: '#fff', borderRadius: '0' }}>查看金融行业方案</Button><Button style={{ background: "none", borderRadius: '0', color: '#fff' }}>了解私域营销方案</Button>
                            </div>
                        </div>
                    </div>
                </Carousel>
            </div>
            <div className={style.dots}>
                {
                    dots.map((item, index) => (
                        <div key={index} className={style.dotmain}>
                            <button onClick={() => handleDotClick(index)}
                                className={index == currentIndex ? style.active : ''}
                            >
                                {item}
                            </button>
                            {
                                index == currentIndex ?
                                    <Progress type="line"
                                        size="small"
                                        showInfo={false}
                                        percent={percent}
                                        strokeColor='#2254f4'
                                        style={{ width: '50px', height: '8px' }}
                                    />
                                    : null
                            }
                        </div>
                    ))
                }
            </div>
        </div>
    );
}

export default Carouselimg;
